<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>HTML5</title>
  <meta name="image" content="./assets/logo.png">
  <meta name="application-name" content="HTML5 Application">
  <meta name="author" content="lizhenyu">
  <meta name="description" content="lizhenyu's notes that how to use html semantic tags">
  <meta name="keywords" content="Vue, HTML, CSS, JavaScript">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta property="og:type" content="article">
  <meta property="og:title" content="Vue.js">
  <meta property="og:description" content="Vue.js - The Progressive JavaScript Framework">
  <meta property="og:image" content="./assets/logo.png">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="theme-color" content="#4fc08d">
  <link rel="stylesheet" href="./index.css">
</head>

<body id="body">
  <section class="container">
    <aside class="aside">
      <ol>
        <li>
          A (7)
          <ol>
            <li>
              <a href="#a"> <code>&lt;a&gt;</code> </a>
            </li>
            <li>
              <a href="#abbr"> <code>&lt;abbr&gt;</code> </a>
            </li>
            <li>
              <a href="#address"> <code>&lt;address&gt;</code> </a>
            </li>
            <li>
              <a href="#area"> <code>&lt;area&gt;</code> </a>
            </li>
            <li>
              <a href="#article"> <code>&lt;article&gt;</code> </a>
            </li>
            <li>
              <a href="#aside"> <code>&lt;aside&gt;</code> </a>
            </li>
            <li>
              <a href="#audio"> <code>&lt;audio&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          B (8)
          <ol>
            <li>
              <a href="#b"> <code>&lt;b&gt;</code> </a>
            </li>
            <li>
              <a href="#bdi"> <code>&lt;bdi&gt;</code> </a>
            </li>
            <li>
              <a href="#bdo"> <code>&lt;bdo&gt;</code> </a>
            </li>
            <li>
              <a href="#blockquote"> <code>&lt;blockquote&gt;</code> </a>
            </li>
            <li>
              <a href="#body"> <code>&lt;body&gt;</code> </a>
            </li>
            <li>
              <a href="#br"> <code>&lt;br&gt;</code> </a>
            </li>
            <li>
              <a href="#button"> <code>&lt;button&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          C (7)
          <ol>
            <li>
              <a href="#canvas"> <code>&lt;canvas&gt;</code> </a>
            </li>
            <li>
              <a href="#caption"> <code>&lt;caption&gt;</code> </a>
            </li>
            <li>
              <a href="#cite"> <code>&lt;cite&gt;</code> </a>
            </li>
            <li>
              <a href="#code"> <code>&lt;code&gt;</code> </a>
            </li>
            <li>
              <a href="#col"> <code>&lt;col&gt;</code> </a>
            </li>
            <li>
              <a href="#colgroup"> <code>&lt;colgroup&gt;</code> </a>
            </li>
            <li>
              <a href="#content"> <code>&lt;content&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          D (10)
          <ol>
            <li>
              <a href="#data"> <code>&lt;data&gt;</code> </a>
            </li>
            <li>
              <a href="#datalist"> <code>&lt;datalist&gt;</code> </a>
            </li>
            <li>
              <a href="#dd"> <code>&lt;dd&gt;</code> </a>
            </li>
            <li>
              <a href="#del"> <code>&lt;del&gt;</code> </a>
            </li>
            <li>
              <a href="#details"> <code>&lt;details&gt;</code> </a>
            </li>
            <li>
              <a href="#dfn"> <code>&lt;dfn&gt;</code> </a>
            </li>
            <li>
              <a href="#dialog"> <code>&lt;dialog&gt;</code> </a>
            </li>
            <li>
              <a href="#div"> <code>&lt;div&gt;</code> </a>
            </li>
            <li>
              <a href="#dl"> <code>&lt;dl&gt;</code> </a>
            </li>
            <li>
              <a href="#dt"> <code>&lt;dt&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          E (2)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          F (5)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          G H (10)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          I (5)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          J K (2)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          L (4)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          M (7)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          N (2)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          O (5)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          P (5)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          Q (1)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          R (4)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          S (15)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          T (13)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          U (2)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          V (2)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
        <li>
          W (1)
          <ol>
            <li>
              <a href="#"> <code>&lt;&gt;</code> </a>
            </li>
          </ol>
        </li>
      </ol>
      <!-- <ol>
            <li>
                <a href="#?"> <code>&lt;?&gt;</code> </a>
            </li>
          </ul> -->

    </aside>
    <section>
      <header>
        <h1>This is title</h1>
      </header>
      <main>
        <!-- A -->
        <article id="a">
          <p>
            <span class="seoSummary"><strong>HTML <code>&lt;a&gt;</code>
                元素</strong>（或称锚元素）可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。</span>
          </p>
          <nav>
            <a href="https://www.bing.com" title="some infomation">Nav</a>
            <a href="https://www.bing.com">Website</a>
            <a href="mailto:abc@abc">Email</a>
            <a href="tel:+12345678">Phone</a>
            <a href="#标题">link to inner element</a>
          </nav>
          <ul>
            <li>
              <a href="https://www.bing.com" title="some infomation about current a tag">Show some infomation when
                hover</a>
            </li>
            <li>
              <a href="https://www.bing.com">Website</a>
            </li>
            <li>
              <a href="mailto:abc@abc">Email</a>
            </li>
            <li>
              <a href="tel:+12345678">Phone</a>
            </li>
            <li>
              <a href="#标题">link to inner element</a>
            </li>
            <li>
              <a href="https://developer.mozilla.org/en-US/" target="_blank">
                <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo" />
              </a>
            </li>
            <li>
              <a href="" download="mypainting.png" id="drag">Download image</a>
            </li>
          </ul>
          <canvas></canvas>
        </article>
        <article id="abbr">
          <p><span class="seoSummary"><strong>HTML
                缩写元素</strong>（<strong><code>&lt;abbr&gt;</code></strong>）用于展示缩写，并且可以通过可选的
              <code><a href="/zh-CN/docs/Web/HTML/Global_attributes#attr-title">title</a></code> 属性提供完整的描述。</span>若使用
            <code>title</code> 属性，则它必须且仅可包含完整的描述内容。</p>
          <p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr
              title="HeryText Marup language">HTML</abbr>.
          </p>
        </article>
        <article>
          <p>HTML <code>&lt;ruby&gt;</code> 元素 被用来展示东亚文字注音或字符注释。</p>
          <p>
            <ruby>
              逐鹿天下
              <rp>(</rp>
              <rt>无精打采</rt>
              <rp>)</rp>
            </ruby>
          </p>
        </article>
        <article id="address">
          <h2>address</h2>
          <address>
            <a href="mailto:abc@abc">Author Email</a>
            <a href="tel:+8612345678">Author Phone</a>
          </address>
        </article>
        <article id="area">
          <h2>map and area</h2>
          <map name="example-map-1">
            <area shape="circle" coords="200,250,25" href="another.htm" />
            <area shape="default" />
          </map>
        </article>
        <article id="article">
          <p> <strong>HTML</strong> <code>&lt;article&gt;</code> 元素
            表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目</p>
          <article>
            <header>
              <h3>this is a title of article tags</h3>
            </header>
            <section>
              <article>
                <p>this is a inner article tags</p>
                <footer>
                  <p>
                    Posted on
                    <time datetime="2019-10-30 23:08">Nov 30</time>
                    by lizhenyu.
                  </p>
                </footer>
              </article>
            </section>
            <footer>
              <p>
                Posted on
                <time datetime="2019-10-30 23:08">Nov 30</time>
                by lizhenyu.
              </p>
            </footer>
          </article>
        </article>
        <article id="aside">
          <p>
            <span class="seoSummary">
              <strong>HTML <code>&lt;aside&gt;</code>元素</strong>
              表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）
            </span>
          </p>
          <article>
            <p>
              迪士尼电影 <cite>海的女儿</cite> (<cite>The Little Mermaid</cite>) 于1989年首次登上银幕
            </p>
            <aside>
              在首次发行期间，该片便收获了 8700 万美元的票房
            </aside>
            <p>
              更多该影片的电影
            </p>
          </article>
          <section>
            <article></article>
          </section>
        </article>
        <article id="audio">
          <p>
            <span class="seoSummary">
              <strong>HTML <code>&lt;audio&gt;</code>元素</strong>
              元素用于在文档中表示音频内容。 <audio> 元素可以包含多个音频资源， 这些音频资源可以使用 src 属性或者
                <source> 元素来进行描述； 浏览器将会选择最合适的一个来使用。对于不支持<audio>元素的浏览器，<audio>元素也可以作为浏览器不识别的内容加入到文档中。
            </span>
          </p>
          <!-- Simple audio playback -->
          <audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay controls
            loop="false" muted preload="auto">
            Your browser does not support the <code>audio</code> element.
          </audio>
        </article>
        <!-- B -->
        <article id="base">
          <p>
            <span class="seoSummary">
              <strong>HTML <code>&lt;base&gt;</code>元素</strong>
              制定一个文档了所有相对URL的根URL，一份只能有一个base
            </span>
          </p>
          <section>
            <a href="#">Link to page top</a>

            <p>如果指定了多个 base 元素，只会使用第一个 href 和 target 值, 其余都会被忽略, 只要写了根位置无关</p>
            <a href="#">Link to JD account center</a>
            <a href="#Top">Link to JD account center</a>

          </section>
        </article>
        <article id="bid">
          <p>
            <span class="seoSummary">
              <strong>HTML <code>&lt;bid&gt;</code>元素</strong>
              (双向隔离元素) 会隔离可能以不同方向进行格式化的外部文本。
              当不知道是从什么方向嵌入文本，如来自于数据库的文本（有起数据库的文本方向）的时候，该元素是十分有用的。
            </span>
          </p>
          <section>
            <p>
              <strong>主要用于不知道文字排列顺序的 比如印度语 是反着输出的</strong>
            </p>
            <h1>World wrestling championships</h1>
            <ul>
              <li><bdi class="name">Evil Steven</bdi>: 1st place</li>
              <li><bdi class="name">François fatale</bdi>: 2nd place</li>
              <li><span class="name">تیز سمی</span>: 3rd place</li>
              <li><bdi class="name">الرجل القوي إيان</bdi>: 4th place</li>
              <li><span class="name" dir="auto">تیز سمی</span>: 5th place</li>
            </ul>
            <p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p>
          </section>
        </article>
        <article id="bdo">
          <p>
            <span class="seoSummary">
              <strong>HTML <code>&lt;bdo&gt;</code>元素</strong>
              (HTML双向覆盖元素)用于覆盖当前文本的朝向，它使得字符按给定的方向排列
            </span>
          </p>
          <section>
            <!-- 改变文本方向 -->
            <p>This text will go left to right.</p>
            <p><bdo dir="ltr">This text will go right
                to left.</bdo></p>
            <p><bdo dir="rtl">This text will go right
                to left.</bdo></p>
          </section>
        </article>
        <article id="blockquote">
          <p>
            <span class="seoSummary">
              <strong>HTML <code>&lt;blockquote&gt;</code>元素</strong>
              或者 HTML 块级引用元素），代表其中的文字是引用内容
            </span>
          </p>
          <section>
            <blockquote cite="https://www.bing.com">
              <p>This message is from baidu search result</p>
              <footer>
                -Lizhenyu
                <cite>Brave new world</cite>
              </footer>
            </blockquote>
            <blockquote cite="https://tools.ietf.org/html/rfc1149">
              <p>Avian carriers can provide high delay, low
                throughput, and low altitude service. The
                connection topology is limited to a single
                point-to-point path for each carrier, used with
                standard carriers, but many carriers can be used
                without significant interference with each other,
                outside of early spring. This is because of the 3D
                ether space available to the carriers, in contrast
                to the 1D ether used by IEEE802.3. The carriers
                have an intrinsic collision avoidance system, which
                increases availability.</p>
              <footer>
                <cite>-From baidu search</cite>
              </footer>
            </blockquote>
            <p>this is a <q>Just do it!</q> quote word </p>
          </section>
        </article>
        <article id="br">
          <p>
            <span class="seoSummary">
              <strong>HTML <code>&lt;br&gt;</code>元素</strong>
              在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。
            </span>
          </p>
          <section>
            Mozilla Foundation<br>
            1981 Landings Drive<br>
            Building K<br>
            Mountain View, CA 94043-0801<br>
            USA
          </section>
        </article>
        <article id="button">
          <p>
            <span class="seoSummary">
              <strong>HTML <code>&lt;button&gt;</code>元素</strong>
              defined
            </span>
          </p>
          <section>
            <form action="https://www.bing.com" id="formId">
              <input type="text" name="input" value="text1">
              <input type="number" name="number" value="10">
              <button type="submit" name="myButton" value="value">submit</button>
              <button type="reset">reset</button>
            </form>
            <button>default button</button>
            <!-- 用于指定当页面加载时按钮必须有输入焦点 -->
            <!-- <button autofocus>autofocus button</button> -->
            <!-- <button autofocus>autofocus button 2</button> -->

            <button disabled>this is a disabled button</button>
            <button form="formId">this is a button bind a form</button>
            <button form="formId" formaction="https://www.taobao.com">rewrite form action property by defined
              formaction</button>
            <button form="formId" formmethod="get">form method is get </button>
            <button form="formId" formmethod="post">form method is post </button>
            <button name="buttonName">buttonName</button>
            <button form="formId" type="submit">submit</button>
            <button form="formId" type="reset">reset</button>
            <button form="formId" value="button value" type="submit"></button>
            <button type="menu">menu</button>
          </section>
        </article>
        <!-- C -->
        <article id="canvas">
          <p>
            <span class="seoSummary">
              <strong>HTML <code>&lt;canvas&gt;</code>元素</strong>
              可被用来通过脚本（通常是JavaScript）绘制图形。比如,它可以被用来绘制图形,制作图片集合,甚至用来实现动画效果。
            </span>
          </p>
          <section>
            <canvas id="canvas" width="300" height="300">
              Sorry, your browser doesn't support the &lt;canvas&gt;

              element.
            </canvas>
          </section>
        </article>
        <article id="caption">
          <p>
            <span class="seoSummary">
              <strong>HTML <code>&lt;caption&gt;</code>元素</strong>
              (or HTML 表格标题元素) 展示一个表格的标题， 它常常作为 table
              的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被CSS样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置
            </span>
          </p>
          <section>
            <table>
              <caption>Awesome caption</caption>
              <tr>
                <td>Awesome data</td>
              </tr>
            </table>
          </section>
        </article>
        <article id="cite">
          <p>
            <span class="seoSummary">
              <strong>HTML <code>&lt;cite&gt;</code>元素</strong>
              HTML引用（ Citation）标签 (<cite>) 表示一个作品的引用。它必须包含引用作品的符合简写格式的标题或者URL，它可能是一个根据添加引用元数据的约定的简写形式
            </span>
          </p>
          <section>
            <p>
              More information can be found in <cite>[ISO-0000]</cite>

            </p>
          </section>
        </article>
        <article id="code">
          <p>
            <span class="seoSummary">
              <strong>HTML <code>&lt;code&gt;</code>元素</strong>
              呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示
            </span>
          </p>
          <section>
            <p>Regular text. <code>This is code.</code> Regular text.</p>
          </section>
        </article>
        <article id="col">
          <p>
            <span class="seoSummary">
              <strong>HTML <code>&lt;col&gt;</code>元素</strong>
              定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于colgroup元素内。
            </span>
          </p>
          <section>

          </section>
        </article>
        <article id="colgroup">
          <p>
            <span class="seoSummary">
              <strong>HTML <code>&lt;colgroup&gt;</code>元素</strong>
              表格列组（Column Group colgroup） 标签用来定义表中的一组列表。
            </span>
          </p>
          <section>

          </section>
          <article id="content">
            <p>
              <span class="seoSummary">
                <strong>HTML <code>&lt;content&gt;</code>元素</strong>
                元素— Web 组件 的技术套件的废弃部分 — 用于 Shadow DOM 内部作为 insertion point，并且不可用于任何正常的 HTML，现在已被
                <code>&lt;slot&gt;</code> 元素代替，它在 DOM 中创建一个位置，Shadow DOM 会插入这里
              </span>
            </p>
            <section>

            </section>
          </article>
          <!-- D -->
          <article id="data">
            <p>
              <span class="seoSummary">
                <strong>HTML <code>&lt;data&gt;</code>元素</strong>
                将一个指定内容和机器可读的翻译联系在一起。但如果内容是与 time 或者 date 相关的，一定要使用 <code>&lt;time&gt;</code>
              </span>
            </p>
            <section>
              <p>新产品</p>
              <ul>
                <li><data value="3967381398">迷你番茄酱</data></li>
                <li><data value="3967381399">巨无霸番茄酱</data></li>
                <li><data value="3967381400">超级巨无霸番茄酱</data></li>
              </ul>
            </section>
          </article>
          <article id="datalist">
            <p>
              <span class="seoSummary">
                <strong>HTML <code>&lt;datalist&gt;</code>元素</strong>
                包含了一组 <code>option</code> 元素，这些元素表示其它表单控件可选值 id绑定表单控件于datalist
              </span>
            </p>
            <section>
              <label for="ice-cream-choice">Choose a floavor:</label>
              <input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
              <datalist id="ice-cream-flavors">
                <option value="Op1"></option>
                <option value="Op2"></option>
                <option value="Op3"></option>
                <option value="Op4"></option>
                <option value="Op5"></option>
              </datalist>
              <label>Choose a browser from this list:
                <input list="browsers" name="myBrowser" /></label>
              <datalist id="browsers">
                <option value="Chrome">
                <option value="Firefox">
                <option value="Internet Explorer">
                <option value="Opera">
                <option value="Safari">
              </datalist>
            </section>
          </article>
          <article id="dd">
            <p>
              <span class="seoSummary">
                <strong>HTML <code>&lt;dd&gt;</code>元素</strong>
              </span>
            </p>
            <section>

            </section>
          </article>
          <article id="del">
            <p>
              <span class="seoSummary">
                <strong>HTML <code>&lt;del&gt;</code>元素</strong>
                标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。ins 标签的作用恰恰于此相反：表示文档中添加的内容。
              </span>
            </p>
            <section>
              <p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
              <del>
                <p>This paragraph has been deleted.</p>
              </del>
            </section>
          </article>

          <article id="details">
            <p>
              <span class="seoSummary">
                <strong>HTML <code>&lt;details&gt;</code>元素</strong>
                可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。summary 元素可为该部件提供概要或者标签
              </span>
            </p>
            <section>
              <details>
                <summary>Summary</summary>
                Some detail infomartion
              </details>
            </section>
          </article>
          <article id="dfn">
            <p>
              <span class="seoSummary">
                <strong>HTML <code>&lt;dfn&gt;</code>元素</strong>
                表示术语的一个定义
              </span>
            </p>
            <section>
              <!-- Define "The Internet" -->
              <p><dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the
                Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.</p>
              <dl>
                <!-- Define "World-Wide Web" and reference definition for "the Internet" -->
                <dt>
                  <dfn>
                    <abbr title="World-Wide Web">WWW</abbr>
                  </dfn>
                </dt>
                <dd>The World-Wide Web (WWW) is a system of interlinked hypertext documents accessed on <a
                    href="#def-internet">the Internet</a>.</dd>
              </dl>
            </section>
          </article>
          <article id="dialog">
            <p>
              <span class="seoSummary">
                <strong>HTML <code>&lt;dialog&gt;</code>元素</strong>
                表示一个对话框或其他交互式组件，例如一个检查器或者窗口
              </span>
            </p>
            <section>
              <dialog open>
                <p>Greetings! one and all!</p>
              </dialog>
              <!-- Simple pop-up dialog box containing a form -->
              <dialog id="favDialog">
                <form method="dialog">
                  <p><label>Favorite animal:
                      <select>
                        <option></option>
                        <option>Brine shrimp</option>
                        <option>Red panda</option>
                        <option>Spider monkey</option>
                      </select>
                    </label></p>
                  <menu>
                    <button value="cancel">Cancel</button>
                    <button id="confirmBtn" value="default">Confirm</button>
                  </menu>
                </form>
              </dialog>

              <menu>
                <button id="updateDetails">Update details</button>
              </menu>

              <output aria-live="polite"></output>
            </section>
          </article>
          <article id="div">
            <p>
              <span class="seoSummary">
                <strong>HTML <code>&lt;div&gt;</code>元素</strong>
                (或 HTML 文档分区元素) 是一个通用型的流内容容器，
                <div> 元素应当仅在没有任何其它语义元素（比如 article 或 nav）可用时使用。
              </span>
            </p>
            <section>

            </section>
          </article>
          <article id="dl">
            <p>
              <span class="seoSummary">
                <strong>HTML <code>&lt;dl&gt;</code>元素</strong>
                或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。

                在 HTML5 之前， <dl> 被大家以定义列表所熟知
              </span>
            </p>
            <section>
              <dl>
                <dt>Name</dt>
                <dd>Godzilla</dd>
                <dt>Born</dt>
                <dd>1952</dd>
                <dt>Birthplace</dt>
                <dd>Japan</dd>
                <dt>Color</dt>
                <dd>Green</dd>
              </dl>
              <dl>
                <div>
                  <dt>Name</dt>
                  <dd>Godzilla</dd>
                </div>
                <div>
                  <dt>Born</dt>
                  <dd>1952</dd>
                </div>
                <div>
                  <dt>Birthplace</dt>
                  <dd>Japan</dd>
                </div>
                <div>
                  <dt>Color</dt>
                  <dd>Green</dd>
                </div>
              </dl>

            </section>
          </article>
          <article id="dt">
            <p>
              <span class="seoSummary">
                <strong>HTML <code>&lt;dt&gt;</code>元素</strong>
                用来指明一个描述列表 (dl) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个 dt 元素
              </span>
            </p>
            <section>
              <input type="text" class="fm-text" id="fm-sms-login-id" tabindex="1" placeholder="请输入手机号码"
                autocapitalize="off">
            </section>
          </article>
          <!-- back top -->
          <a href="#" class="back-top">🏠</a>
      </main>
      <footer>
        <p>There are some copyright info</p>
        <address>
          <a href="mailto:abc@abc">Author Email</a>
          <a href="tel:+8612345678">Author Phone</a>
        </address>
      </footer>
    </section>
  </section>

  <script src="./index.js"></script>
</body>

</html>